<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
	<title>新建线索</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		.body{
			max-height: 800px;
    		overflow: auto;
		}
		.ant-modal-body{
			padding: 15px 32px 24px 0;
			font-size: 14px;
    		line-height: 1.5;
		}
		.dialog-title{
			font-size: 17px;
		    width: 100%;
		    text-align: center;
		    margin-top: 2px;
		    font-weight: 600;
		    line-height: 24px;
		    letter-spacing: 1px;
		}
		.row{
			display: flex;
		    -webkit-box-align: start;
		    align-items: flex-start;
		    margin-bottom: 33px;
		}
		.ont-size-14{
    		color: rgba(0,0,0,.85);
		}
		.font-color-85{
			font-size: 14px;
		}
		.font-bold{
			font-weight: 500;
		}
		.text-blue, .text-bule-hover:hover {
		    color: #1890ff;
		}
		.import-dialog .row .item .item-block {
		    margin-top: 8px;
		}
		.csv-uploader{
			margin-bottom: 8px;
		}
		.csv-uploader .upload-input {
		    width: 0;
		    height: 0;
		    visibility: hidden;
		    display: none;
		}
		.csv-uploader .upload {
		    width: 139px;
		    height: 42px;
		    display: -webkit-box;
		    display: flex;
		    -webkit-box-align: center;
		    align-items: center;
		    padding: 12px 28px 13px;
		    /*border: 1px solid #d9d9d9;*/
		    border-radius: 2px;
		    word-break: keep-all;
		}
		.clickable {
		    cursor: pointer;
		    -webkit-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none;
		}
		.importExcel_button_container{
			display: flex;
			justify-content: flex-end;
			padding-top: 10px;
		}
	</style>
</head>
<body>
	<form class="layui-form" action="" id="addClue">
		<div class="body ant-modal-body">
			<h3 style="text-align: center;padding-bottom: 20px;padding-left: 32px;font-weight: bold;font-size: 20px;">新建线索</h3>
			<div class="item" style="">
				<div class="layui-form-item">
			    	<label class="layui-form-label">手机:</label>
			    	<div class="layui-input-block">
			      		<input type="text" value="" name="mobilePhone" maxlength="11" lay-verify="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
			    	</div>
				</div> 
			</div>
			<div class="item" style="">
				<div class="layui-form-item">
			    	<label class="layui-form-label">备注:</label>
			    	<div class="layui-input-block">
			      		<input type="text" value="" name="remark" maxlength="20" placeholder="请设置用户备注" autocomplete="off" class="layui-input">
			    	</div>
				</div> 
			</div>
			<div class="item" style="">
				<div class="layui-form-item">
				    <label class="layui-form-label">线索等级:</label>
				    <div class="layui-input-block">
				      <select name="levelId">
				        <option value=""></option>
				        {loop $culeLevels as $culeLevel}
				        <option value="{$culeLevel->id}">{$culeLevel->name}</option>
				        {/loop}
				      </select>
				    </div>
				 </div>
		    </div>
		    <div class="item" style="">
		    	<div class="layui-form-item">
		    		<lable class="layui-form-label">选择标签:</lable>
		    		<div class="layui-input-block select-tag" style="">
		    			<input type="hidden" name="addTag" id="addTag" value="">
						<input type="text" value="" id="checkLable" readonly placeholder="请选择标签" autocomplete="off" class="layui-input">
						<!-- <span style="position:absolute;right:50%;"><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span> -->
					</div>
		    	<div>
		    </div>
			<div class="item" style="">
			  	<div class="layui-form-item">
				    <label class="layui-form-label">线索分配:</label>
				    <div class="layui-input-block">
				      <input type="radio" name="clueAllocation" value="1" title="选择员工分配" checked lay-filter="clueAllocation">
				      <input type="radio" name="clueAllocation" value="2" title="分配至公海" lay-filter="clueAllocation">
				      <input type="radio" name="clueAllocation" value="3" title="手动分配" lay-filter="clueAllocation">
				    </div>
				</div>
			 </div>
			<div class="item" id="selectUser" style="">
				<div class="layui-form-item">
				    <label class="layui-form-label">选择员工:</label>
				    <!-- <div class="layui-input-block">
				      <select name="userId" id="userId" value="">
				        <option value=""></option>
				        {loop $qyUsers as $qyUser}
				        <option value="{$qyUser->id}">{$qyUser->name}</option>
				        {/loop}
				      </select>
				    </div> -->
				    <div class="layui-input-block">
	                	<span class="layui-btn layui-btn-primary" id="addPeople">+ 前往添加</span>
	                	<span id="checkUserCon"></span>
	              	</div>
	              	<input type="hidden" name="checkUser" id="checkUser"/>
				</div>
				<div class="layui-form-item" style="margin-left: 70px;">
					<label class="layui-form-label" style="width: 140px;">提醒员工添加好友:</label>
					<div class="layui-input-block">
				      	<input type="checkbox" name="remindStatus" lay-skin="switch">
				    </div>
				</div>
				<div class="layui-form-item" style="margin-left: 108px;color: #999999;font-size: 12px;">开启后将通过「企微助手」提醒员工通过该手机号添加客户</div>
			</div>
			<div class="item" id="selectSea" style="display: none;">
				<div class="layui-form-item">
				    <label class="layui-form-label">选择公海:</label>
				    <div class="layui-input-block">
				      <select name="seaId" id="seaId" value="">
				        <option value=""></option>
				        {loop $seas as $sea}
				        <option value="{$sea->id}">{$sea->name}</option>
				        {/loop}
				      </select>
				    </div>
				</div>
			</div>
			<div class="layui-form-item importExcel_button_container">
		 	<button id="" type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="parent.layer.closeAll()" style="">取消</button>
		 	<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="addClue">创建</button>
		  	</div>
		</div>
	</form>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/ajax.js"></script>
<script type="text/javascript">
	$('#checkLable').on('click',function(){
		layer.open({
		  type: 2,
		  title: '请选择标签',
		  shadeClose: true,
		  shade: 0.2,
		  area: ['700px', '530px'],
		  content: 'select_tag.html'
		}); 
	})
</script>
<script type="text/javascript">
	//表单
	layui.use('form', function(){
	  var form = layui.form;
	  
	  form.on('radio(clueAllocation)', function (data) {
	  	let clueAllocation = data.value;
	  	if(clueAllocation == 1){
	  		$("#selectSea").hide();
	  		$("#selectUser").show();       
	  	}else if(clueAllocation == 2){
	  		$("#selectSea").show();
	  		$("#selectUser").hide();      
	  	}else{
	  		$("#selectSea").hide();
	  		$("#selectUser").hide();        
	  	}
	  })
	  //监听提交
	  form.on('submit(addClue)', function(data){
	    // layer.msg(JSON.stringify(data.field));
	    // return false;
	    console.log(data); 
	    if(data.field.clueAllocation == 1 && data.field.checkUser == ''){
	    	tusi('请选择员工'); return;
	    }
	    if(data.field.clueAllocation == 2 && data.field.seaId == ''){
	    	tusi('请选择公海'); return;
	    }
	    var formData = $('#addClue').serialize();
	    myAjaxPost(false, true, 'add_clue.html', formData, function (resp) {
	    	console.log(resp);
			if (resp.status == 'success') {
				tusi(resp.msg);
				setTimeout(function(){
					//parent.layer.closeAll('iframe');
					parent.location.reload();
				},1000);
			}else{
				tusi(resp.msg);
			}
		});
	  });

	});

	$('#addPeople').on('click',function(){
      layer.open({
        type: 2,
        title: '请选择使用人员',
        shadeClose: true,
        shade: 0.2,
        area: ['700px', '530px'],
        content: 'select_user.html'
      }); 
    })
</script>
</html>